import './setWhiteList.less';
import React, { useEffect, useState } from 'react';
import { Form, Input, Table, Modal, Radio, Upload } from 'antd';
import { setWhiteList, changeWhite, downWhite } from './components/createActivity.js';
import fileDownload from 'js-file-download';  // 插件
import xlsx from 'xlsx';  // 插件

export default function (props) {
  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
  const [tableData, setTableData] = useState([]);
  const [activityName, setActivityName] = useState('');
  const [activityContent, setActivityContent] = useState('');
  const [creator, setCreator] = useState('');
  const [activityTime, setActivityTime] = useState('');
  const [value, setValue] = useState(1);
  const [activityBasicId, setActivityBasicId] = useState('');
  const [file, setFile] = useState([]);
  const columns = [
    {
      title: '姓名',
      dataIndex: '姓名',
      key: '姓名',
    },
    {
      title: '手机号',
      dataIndex: '手机号码',
      key: '手机号码',
    },
    {
      title: '创建时间',
      dataIndex: 'creatTime',
      key: 'creatTime',
    },
  ];
  const [isModalVisible, setIsModalVisible] = useState(false);

  const changeClick = () => {
    showModal();
  };

  const showModal = () => {
    setIsModalVisible(true);
  };

  const handleOk = async () => {
    setIsModalVisible(false);
    const { activityBasicId } = props.location.query;
    const res = await changeWhite({
      activityBasicId,
      isEveryoneExpose: value == 1 ? true : false,
    });
    // console.log(res);
  };

  const handleCancel = () => {
    setIsModalVisible(false);
  };

  useEffect(() => {
    const { activityBasicId } = props.location.query;
    setActivityBasicId(activityBasicId);
    getList();
  }, []);
  const getList = async () => {
    const { activityBasicId } = props.location.query;
    const res = await setWhiteList({ activityBasicId });

    if (res.data.code == 200) {
      const { activityName, activityContent, startDate, endDate, creator } =
        res.data.data;
      setActivityName(activityName);
      setActivityContent(activityContent);
      setCreator(creator);
      setActivityTime(startDate + '-' + endDate);
    }
  };
  const onSelectChange = (selectedRowKeys) => {
    let a = [...selectedRowKeys];
    // console.log(a);
    setSelectedRowKeys(a);
  };
  const rowSelection = {
    selectedRowKeys,
    onChange: onSelectChange,
  };

  const onChange = (e) => {
    // console.log('radio checked', e.target.value);
    setValue(e.target.value);
  };

  const downClick = () => {
    downWhite().then((res) => {
      fileDownload(res.data, 'safa.xlsx');
    });
  };

  const props2 = {
    name: 'file',
    action: '/campus/campusweb/activity/candidate/importCandidates',
    headers: {
      authorization: 'authorization-text',
    },
    data: {
      activityBasicId,
    },
    onChange(info) {
      // 读取表格对象
      const filereder = new FileReader();
      filereder.onload = (e) => {
        const workbook = xlsx.read(e.target.result, { type: 'binary' });
        const sheetNames = workbook.SheetNames;
        // 找到第一张表
        const sheet1 = workbook.Sheets[sheetNames[0]];
        // 读取内容
        let a = xlsx.utils.sheet_to_json(sheet1).map((item, index) => {
          item.key = index;
          return item;
        });
        console.log(a);
        setTableData(a);
        return xlsx.utils.sheet_to_json(sheet1);
      };
      filereder.readAsBinaryString(info.file.originFileObj);
    },
  };

  return (
    <div>
      <div className="white-one">
        <div className="white-title">设置白名单</div>
        <div>
          <div className="white-every">
            <div>活动名称：</div>
            <div>{activityName}</div>
          </div>
          <div className="white-every">
            <div>活动名称：</div>
            <div>{activityContent}</div>
          </div>
          <div className="white-every">
            <div>活动抽奖时间：</div>
            <div>{activityTime}</div>
          </div>
          <div className="white-every">
            <div>公开方式：</div>
            <div>{creator}</div>
            <div className="white-change" onClick={changeClick}>
              修改
            </div>
          </div>
        </div>
      </div>
      <div className="white-two">
        <div className="white-wifi">
          <div>抽奖白名单</div>
          <div>
            <Form name="basic" autoComplete="off">
              <div className="white-some">
                <div className="white-every">
                  <Form.Item label="姓名" name="name">
                    <Input />
                  </Form.Item>
                  <Form.Item label="手机号" name="phone">
                    <Input />
                  </Form.Item>
                </div>
                <div className="white-every">
                  <div className="list-btn1">搜索</div>
                  <div className="list-btn2">重置</div>
                </div>
              </div>
            </Form>
          </div>
          <div className="white-every1">
            <Upload {...props2}>
              <div className="list-btn1">导入</div>
            </Upload>
            <div className="list-btn1">删除</div>
            <div onClick={downClick}>下载导入模板</div>
          </div>
          <Table
            pagination={false}
            columns={columns}
            dataSource={tableData}
            rowSelection={rowSelection}
          />
        </div>
      </div>
      <Modal
        title="Basic Modal"
        visible={isModalVisible}
        onOk={handleOk}
        onCancel={handleCancel}
      >
        <Radio.Group onChange={onChange} value={value}>
          <Radio value={1}>白名单</Radio>
          <Radio value={2}>所有</Radio>
        </Radio.Group>
      </Modal>
    </div>
  );
}
